<clr-main-container *ngIf="!(shouldProtect|async)">
  <clr-header class="header header-7">
    <div class="branding">
      <a href="/" class="nav-link">
        <app-logo></app-logo>
        <span class="title">Data Flow</span>
      </a>
    </div>
    <app-search></app-search>
    <div class="header-actions">
      <app-user *ngIf="securityEnabled|async"></app-user>
      <span class="divider"></span>
      <app-about-signpost></app-about-signpost>
    </div>
  </clr-header>
  <div class="content-container">
    <clr-vertical-nav *ngIf="!(shouldProtect|async)">
      <clr-vertical-nav-group routerLinkActive="active"
                              clrVerticalNavGroupExpanded="true"
                              [appRole]="[]" appFeature="streams">
        <!--      <clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true">-->
        <!--        <clr-icon shape="dashboard" clrVerticalNavIcon></clr-icon>-->
        <!--        Dashboards-->
        <!--        <clr-vertical-nav-group-children>-->
        <!--          <a-->
        <!--            clrVerticalNavLink-->
        <!--            routerLinkActive="active"-->
        <!--            routerLink="dashboard/my-dashboard">-->
        <!--            My Dashboard-->
        <!--          </a>-->
        <!--        </clr-vertical-nav-group-children>-->
        <!--      </clr-vertical-nav-group>-->
        <clr-icon shape="cloud-scale" clrVerticalNavIcon></clr-icon>
        Streams
        <clr-vertical-nav-group-children>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="streams/list">
            Streams
          </a>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="streams/runtime">
            Runtime
          </a>
        </clr-vertical-nav-group-children>
      </clr-vertical-nav-group>
      <clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true"
                              [appRole]="[]" appFeature="tasks">
        <clr-icon shape="blocks-group" clrVerticalNavIcon></clr-icon>
        Tasks / Jobs
        <clr-vertical-nav-group-children>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="tasks-jobs/tasks">
            Tasks
          </a>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="tasks-jobs/task-executions">
            Tasks executions
          </a>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="tasks-jobs/job-executions">
            Jobs executions
          </a>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="tasks-jobs/schedules"
            [appRole]="[]"
            appFeature="schedules">
            Schedules
          </a>
        </clr-vertical-nav-group-children>
      </clr-vertical-nav-group>
      <clr-vertical-nav-group routerLinkActive="active"
                              clrVerticalNavGroupExpanded="false">
        <clr-icon shape="briefcase" clrVerticalNavIcon></clr-icon>
        Manage
        <clr-vertical-nav-group-children>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="manage/apps">
            Applications
          </a>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="manage/records">
            Records
          </a>
          <a
            clrVerticalNavLink
            routerLinkActive="active"
            routerLink="manage/import-export"
            [appRole]="[]"
            appFeature="streams,tasks">
            Import / Export
          </a>
        </clr-vertical-nav-group-children>
      </clr-vertical-nav-group>
      <a clrVerticalNavLink routerLink="settings" routerLinkActive="active">
        <clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
        Settings
      </a>
      <a clrVerticalNavLink routerLink="dev/dashboard" routerLinkActive="active" *ngIf="isDevEnv">
        <clr-icon shape="bug" clrVerticalNavIcon></clr-icon>
        Dev. mode
      </a>
    </clr-vertical-nav>
    <div class="content-area">
      <router-outlet></router-outlet>
    </div>
  </div>
</clr-main-container>

<div class="login-wrapper" *ngIf="(shouldProtect|async)">
  <form class="login">
    <section class="title">
      <h3 class="welcome">Welcome to</h3>
      Data Flow UI
      <h5 class="hint">You have to log in to access the application.</h5>
    </section>
    <div style="padding-bottom: 50px">
      <a href="/login" class="btn btn-primary">
        Log In
      </a>
    </div>
  </form>
</div>
